<template>
  <div id="userCenter">
    <div class="topbg">
      <div class="close" @click="close()">退出</div>
      <div class="header">个人中心</div>
      <div class="content"> 
        <div class="touxiang">
          <img src="../assets/images/people.png" alt="">
        </div>
          <div>
            <p>{{arr.user_name}}</p>
            <p>{{arr.phone}}</p>
            <p>当前剩余积分：{{arr.points}}积分</p>
          </div>
      </div> 
    </div>
    <div class="message" @click="gongGao()">
      <i class="iconfont icon-xiaolaba"></i>
      <span>&nbsp; {{gonggao}}</span>
    </div>
    <div class="fatherbox">
      <div class="recode">我的记录</div>
      <div class="box" @click="yigoutuijian()">
        <span class="left">
          <i class="iconfont icon-5"></i><span>&nbsp;&nbsp;已购记录</span>
        </span>
      <span class="right">{{count_order}}&nbsp;></span>
      </div>
        <div class="box" @click="jifenjilu()">
          <span class="left">
            <i class="iconfont icon-5"></i><span>&nbsp;&nbsp;积分记录</span>
          </span>
        <span class="right">{{count_log}}&nbsp;></span>
        </div>
      <!-- <div class="box" @click="guanzhu()">
        <span class="left">
          <i class="iconfont icon-5"></i><span>&nbsp;&nbsp;已关注专家</span>
        </span>
      <span class="right">{{guanzhu_count}}&nbsp;></span>
      </div> -->
      <div class="recode chong">我要充值</div>
      <div class="num">
        <div class="first">
          <div  class="item" v-for="(item,index) in money" @click="active(index,item.id)" :key="index">
            <div class="boxDetail" :class="{active: index==isActive}">{{item.num}}</div>
            <p v-if="item.pp">可兑换<span>{{item.sum}}</span>积分</p>
          </div>
        </div>
        <div class="liji">
          <button @click="recharge()" :disabled="moneynum==='0'">立即充值</button>
        </div>
      </div>
    </div>
    <com-foot :select="3"></com-foot>
  </div>
</template>

<script>
import login from "./login"; //引用模块进来
export default {
  name: "userCenter",
  data() {
    return {
      arr: [],
      points: "10",
      count_log: "",
      count_order: "",
      guanzhu_count: "",
      gonggao: "",
      gonggaoid: "",
      money: [],
      isActive: -1,
      idnum: "",
      moneynum: "0",
      payOption: {}
    };
  },
  // beforeRouteEnter(to, from, next) {
  //   // var key = JSON.parse(localStorage.fencaike);
  //   // console.log(key.userid);
  //   if (localStorage.fencaike) {
  //     next(vm => {
  //       vm.isLogin();
  //     });
  //   } else {
  //     next(vm => {
  //       vm.$router.push("login");
  //       vm.$bus.$emit("toast", "请先登录账户");
  //     });
  //   }
  // },
  mounted() {
    this.isLogin();
  },
  methods: {
    close() {
      localStorage.removeItem("fencaike");
      this.axios.post("Login/loginout").then(response => {
        this.$router.push("login");
      });
    },
    active(index, id) {
      this.isActive = index;
      this.idnum = id;
      this.moneynum = this.money[index];
    },
    isLogin () {
      this.axios.post("User/index").then(response => {
          console.log(response);
          (this.money = response.data.num),
          (this.arr = response.data.arr),
          (this.count_log = response.data.count_log),
          (this.count_order = response.data.count_order),
          (this.guanzhu_count = response.data.guanzhu_count),
          (this.gonggao = response.data.gonggao.title),
          (this.gonggaoid = response.data.gonggao.id);
        if (response.data.status === "2") {
          window.location.href = response.data.url;
        }
      });
    },
    // 支付
    recharge() {
      console.log(this.idnum);
      this.axios
        .post("Wxpay/wxPay", {
          id: this.idnum
        })
        .then(res => {
          const jsApiParameters = res.data;
          this.jsSdk(jsApiParameters);
        });
    },
    jsSdk(jsApiParameters) {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: jsApiParameters.appId,
          package: jsApiParameters.package,
          nonceStr: jsApiParameters.nonceStr,
          timeStamp: jsApiParameters.timeStamp,
          signType: jsApiParameters.signType,
          paySign: jsApiParameters.paySign
        },
        // jsApiParameters,
        function(res) {
          WeixinJSBridge.log(res.err_msg);
          var result = res.err_msg;
          // alert(JSON.stringify(res));
          // return;
          if (result == "get_brand_wcpay_request:ok") {
            alert("充值成功");
            var url = "http://www.hnprkj.com/#/userCenter";
          } else {
            alert("你取消了支付");
            var url = "http://www.hnprkj.com/#/userCenter";
          }
          window.location.href = url;
        }
      );
    },
    // 准备好微信sdk部分
    // jsSdk(jsApiParameters){
    //     var  vm = this;
    // if (typeof WeixinJSBridge == "undefined"){
    //     if( document.addEventListener ){
    //       console.log(1111);
    //         document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady, false);
    //         console.log(2222);
    //     }else if (document.attachEvent){
    //         document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady);
    //         document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady);
    //     }
    // }else{
    //   vm.onBridgeReady(jsApiParameters);
    // }
    // },

    yigoutuijian() {
      this.$router.push("gourecommend");
    },
    jifenjilu() {
      this.$router.push("jifen");
    },
    guanzhu() {
      this.$router.push({ name: "expert", query: { status: 2 } });
    },
    gongGao() {
      this.$router.push({ name: "detail", query: { id: this.gonggaoid } });
    }
  }
};
</script>

<style lang="scss">
#userCenter {
  background: white;
  padding-bottom: 50px;
  .topbg {
    width: 100%;
    height: 415px;
    background-image: url("../assets/images/user.png");
    background-size: 100% 100%;
    position: relative;
    .close {
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 8px;
      box-shadow: 0px 4px 0px #585858;
      font-size: 12px;
      background-color: rgba(169, 34, 39, 1);
      color: white;
      position: absolute;
      top: 20px;
      right: 40px;
    }
    .header {
      height: 86px;
      text-align: center;
      color: black;
      line-height: 86px;
      font-size: 26px;
      font-weight: 700;
    }
    .content {
      box-sizing: border-box;
      padding-top: 50px;
      width: 620px;
      height: 299px;
      background-color: white;
      border-radius: 10px;
      margin: 0 auto;
      box-shadow: 7px 10px 0px rgba(0, 0, 0, 0.41);
      .touxiang {
        height: 112px;
        text-align: center;
        img {
          height: 100%;
        }
      }
      p {
        text-align: center;
        line-height: 34px;
      }
      p:nth-of-type(1) {
        margin-top: 10px;
        font-size: 28px;
        color: rgba(0, 0, 0, 1);
      }
      p:nth-of-type(2) {
        font-size: 20px;
        color: rgba(160, 160, 160, 1);
      }
      p:nth-of-type(3) {
        font-size: 18px;
        color: rgba(89, 89, 89, 1);
      }
    }
  }
  .message {
    width: 720px;
    height: 55px;
    font-size: 18px;
    padding-left: 40px;
    color: rgba(69, 69, 69, 1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: rgba(245, 245, 245, 1);
    .icon-xiaolaba {
      color: #fd8f06;
      font-size: 30px;
    }
    span {
      font-size: 26px;
      color: #7b7a7a;
    }
  }
  .fatherbox {
    padding: 0 50px;
    .recode {
      height: 90px;
      line-height: 90px;
      border-bottom: 1px solid #f4f4f4;
    }
    .box {
      height: 62px;
      line-height: 62px;
      border-bottom: 1px solid #f4f4f4;
      display: flex;
      justify-content: space-between;
      .left {
        font-size: 24px;
        color: rgba(123, 122, 122, 1);
        .iconfont {
          font-size: 30px;
        }
      }
      .right {
        font-size: 24px;
        color: #fd8f06;
      }
    }
    .chong {
      color: rgba(255, 182, 105, 1);
      border-bottom: none;
      margin-bottom: 18px;
    }
    .num {
      .first {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 40px;
        flex-wrap: wrap;
        p {
          text-align: center;
          color: rgba(123, 122, 122, 1);
          font-size: 18px;
          span {
            color: #fd8f06;
            font-size: 24px;
          }
        }
      }
      .item {
        text-align: center;
        width: 200px;
      }
      .boxDetail {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 20px 0px;
        background: rgba(227, 185, 4, 1);
        border-radius: 25px;
        line-height: 100px;
        text-align: center;
        font-size: 28px;
        color: rgba(255, 255, 255, 1);
      }
      .active {
        background: #ff7a24;
      }
    }
    .liji {
      margin-top: 24px;
      text-align: center;
      button {
        width: 254px;
        height: 65px;
        background: rgba(255, 122, 36, 1);
        border-radius: 15px;
        font-size: 30px;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
